<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>computed和watch的区别</title>
    <script type="text/javascript" src="js/vue.js"></script>
</head>

<body>
    <div id="app">
        姓：<input type="text" v-model="firstName"><br />
        名：<input type="text" v-model="lastName"><br />
        全名(计算属性)：<span>{{fullName}}</span><br />
        全名(监听)：<span>{{allName}}</span>
    </div>
    <script type="text/javascript">
        // computed可以实现的，watch也可以实现；watch可以实现的，computed不一定可以实现；例如：watch可以异步操作
        // 重点：1. 所有被vue管理的函数最好写成普通函数，这样this才指向vm 
        //      2. 不被vue管理的函数（定时器的回调函数、ajax的回调函数、Promise的回调函数等），最好写成箭头函数，这样this才指向vm
        new Vue({
            el: '#app',
            data() {
                return {
                    firstName: 'Wu',
                    lastName: 'JingZe',
                    allName: 'Wu-JingZe'
                };
            },
            computed: {
                fullName() {
                    // 计算属性是利用返回值更新数据，但计时器中的方法是交给js引擎处理，所以这里的计算值返回给了Window，没有返回给vm
                    // setTimeout(()=>{
                    //     return this.firstName + '-' + this.lastName;
                    // },1000)
                    return this.firstName + '-' + this.lastName;
                }
            },
            watch: {
                firstName(newVal, oldVal) {
                    this.allName = newVal + '-' + this.lastName;
                },
                lastName(newVal, oldVal) {
                    // 异步任务，交给js处理
                    /* 注意：
                        ① 此处使用的是箭头函数，定时器的方法是交给js引擎处理的
                        ② 箭头函数没有this
                        ③ 因为②，所以向外围寻找this，找到lastName(newVal, oldVal)的this，所以this就代表vm
                    */
                    setTimeout(()=>{
                        this.allName = this.firstName + '-' + newVal;
                    },1000)
                }
            }
        })
    </script>
</body>

</html>